<template>
    <div class="topic">
        <h2>专题精选</h2>
        <van-swipe :loop="false" :width="300">
            <van-swipe-item v-for="item in topicList" :key="item.id">
                <img :src="item.item_pic_url" alt="" width="300" height="200" />
                <h3 class="van-ellipsis">
                    {{ item.title }}
                    <span>{{ item.price_info | RMBFormat }}</span>
                </h3>
                <p class="van-ellipsis">{{ item.subtitle }}</p>
            </van-swipe-item>
            <!-- 自定义 -->
            <template #indicator>
                <div class="custom-indicator"></div>
            </template>
        </van-swipe>
    </div>
</template>

<script>
export default {
    props: ["topicList"],
    data() {
        return {};
    },
};
</script>
 
<style lang = "less" scoped>
.topic {
    padding: 0.1rem;
    background-color: #fff;
    color: #555;

    h2 {
        font-size: 0.2rem;
        text-align: center;
        margin-bottom: 0.1rem;
    }
    .van-swipe-item {
        margin-right: 0.15rem;

        h3 {
            font-size: 0.16rem;

            margin: 0.1rem 0;
            span {
                color: darkred;
            }
        }
        p {
            font-size: 0.14rem;
        }
    }
}
</style>